import React, { useState, useEffect } from 'react'
import { NavBar, Mask } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import './Search.css'
import axios from 'axios'

export default function People() {
    const navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    const [idx, setidx] = useState(1)
    const [type, settype] = useState('成人')
    const [name, setname] = useState('')
    const [types, settypes] = useState('身份证')
    const [hao, sethao] = useState('')
    const [phone, setphone] = useState('')
    const [PeopleList, setPeopleList] = useState([])
    const back = () => {
        navigate('/app/my')
    }

    const handlerQuxiao = () => {
        setVisible(false)
    }


    const getPeople = async () => {
        const res = await axios.get('http://localhost:3000/getPeople')
        setPeopleList(res.data.people)
    }

    const handlerQueding = async () => {
        const obj = {
            name: name,
            type: type,
            types: types,
            hao: hao,
            phone: phone
        }
        await axios.post('http://localhost:3000/addPeople', obj)
        setVisible(false)
        getPeople()
    }


    const handlerClick1 = () => {
        setidx(1)
        settype('成人')
    }

    const handlerChange = (e) => {
        settypes(e.target.value)
    }

    const handlerClick2 = () => {
        setidx(2)
        settype('儿童')
    }

    const handlerDel = async (id) => {
        await axios.post('http://localhost:3000/delPeople', { _id: id })
        getPeople()
    }


    useEffect(() => {
        getPeople()
    }, [])
    return (
        <div>
            <NavBar onBack={back}>
                <h3>常用人</h3>
            </NavBar>
            <hr />
            <button onClick={() => { setVisible(true) }} style={{ width: '300px', height: '45px', position: 'absolute', bottom: '20px', left: '70px', borderRadius: '20px', background: 'linear-gradient(to right, rgb(237, 195, 145),rgb(244, 171, 87))', color: 'white', border: '0px', fontSize: '15px' }}>新增参观者</button>
            <>
                <Mask visible={visible} onMaskClick={() => setVisible(false)}>
                    <div className='overlayContent1'>
                        <h3 style={{ textAlign: 'center', marginTop: '20px' }}>新增参观者</h3>
                        <div style={{ width: '100%', height: '40px', marginTop: '25px' }}>
                            <span style={{ fontSize: '15px', marginLeft: '20px', marginRight: '65px' }}>类型</span>
                            <button style={{ width: '60px', height: '30px', marginRight: '5px', borderRadius: '5px', border: '0px', backgroundColor: idx === 1 ? 'rgb(252, 226, 191)' : '#eee' }} onClick={() => { handlerClick1() }}>成人</button>
                            <button style={{ width: '60px', height: '30px', borderRadius: '5px', border: '0px', backgroundColor: idx === 2 ? 'rgb(252, 226, 191)' : '#eee' }} onClick={() => { handlerClick2() }}>儿童</button>
                        </div>
                        <div style={{ width: '100%', height: '40px', marginTop: '10px' }}>
                            <span style={{ fontSize: '15px', marginLeft: '20px', marginRight: '65px' }}>姓名</span>
                            <input placeholder='请输入姓名' style={{ width: '200px', height: '30px' }} onChange={(e) => { setname(e.target.value) }} />
                        </div>
                        <div style={{ width: '100%', height: '40px', marginTop: '10px' }}>
                            <span style={{ fontSize: '15px', marginLeft: '20px', marginRight: '35px' }}>证件类型</span>
                            <select onChange={(e) => { handlerChange(e) }} style={{ width: '200px', height: '30px' }}>
                                <option value={'身份证'}>身份证</option>
                                <option value={'护照（Passport）'}>护照（Passport）</option>
                            </select>
                        </div>
                        <div style={{ width: '100%', height: '40px', marginTop: '10px' }}>
                            <span style={{ fontSize: '15px', marginLeft: '20px', marginRight: '35px' }}>证件号码</span>
                            <input placeholder='请输入证件号码' style={{ width: '200px', height: '30px' }} onChange={(e) => { sethao(e.target.value) }} />
                        </div>
                        <div style={{ width: '100%', height: '40px', marginTop: '10px' }}>
                            <span style={{ fontSize: '15px', marginLeft: '20px', marginRight: '35px' }}>联系电话</span>
                            <input placeholder='请输入联系电话' style={{ width: '200px', height: '30px' }} onChange={(e) => { setphone(e.target.value) }} />
                        </div>
                        <button onClick={() => { handlerQuxiao() }} style={{ width: '150px', height: '40px', borderRadius: '20px', border: '1px solid black', marginLeft: '15px', marginTop: '20px', marginRight: '5px' }}>取消</button>
                        <button onClick={() => { handlerQueding() }} style={{ width: '150px', height: '40px', borderRadius: '20px', border: '0px', background: 'linear-gradient(to right, rgb(237, 195, 145),rgb(244, 171, 87))', color: 'white' }}>确定</button>
                    </div>
                </Mask>
            </>
            {PeopleList.map(item => {
                return <div key={item._id} style={{ width: '100%', height: '120px', borderBottom: '10px solid #eee' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>
                            <button style={{ width: '40px', height: '30px', border: '0px', borderRadius: '5px', marginLeft: '10px', marginTop: '10px', fontSize: '15px' }}>{item.type}</button>
                            <span style={{ fontSize: '15px', marginLeft: '5px' }}>{item.name}</span>
                        </div>
                        <div>
                            <img onClick={() => { handlerDel(item._id) }} style={{ marginRight: '10px', marginTop: '10px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B8%B8%E7%94%A8%E4%BA%BA/u3723.svg' />
                        </div>
                    </div>
                    <div>
                        <p style={{ marginTop: '15px', marginLeft: '10px', fontSize: '15px' }}>{item.phone}</p>
                        <p style={{ marginTop: '15px', marginLeft: '10px', fontSize: '15px' }}>{item.types}&nbsp;&nbsp;{item.hao}</p>
                    </div>
                </div>
            })}
        </div>
    )
}